<template>
    <view>
        <uv-modal class="cancelClass" ref="textAreaRef" showCancelButton :title="props.title" @confirm="sumbitHandle" @cancel="closeHandle" @close="closeHandle">
        <template v-slot:default>
            <view style="display: flex; flex-direction: row;"> <text style="color: red">*</text> {{ props.contentTitle }} </view>
            <uv-gap height="10" bgColor="#fff"></uv-gap>
            <uv-textarea customStyle="display: block" v-model="modalText" :placeholder="props.placeholder"></uv-textarea>  
        </template>
        </uv-modal>
    </view>
</template>

<script setup lang="ts">
    import { ref, computed, watch, onUnmounted } from "vue";
    const textAreaRef = ref<Element>();
    const props = withDefaults(defineProps<{
        title: string,
        contentTitle: string,
        modelValue: boolean,
        text: string | any,
        placeholder?: string,
    }>(), {
        title: "默认标题",
        contentTitle: "内容标题",
        modelValue: false,
        text: "",
        placeholder: "默认提示"
    });
    // textArea绑定的数据
    const modalText = computed({
        get() {
            return props.text
        },
        set(val) {
            emits("update:text", val)
        }
    })
    const emits = defineEmits<{
        (e : 'submit', event : any) : void,
        (e : 'update:text', event : any) : void,
        (e : 'update:modelValue', event : any) : void,
    }>();
    const sumbitHandle = () => emits("submit", props.modelValue);
    // 使用value控制modal
    const unModalFlag = watch(() => props.modelValue, (newVal, oldValue) => {
        if(newVal) {
            // @ts-ignore
            textAreaRef.value?.open();
        } else {
            // @ts-ignore
            textAreaRef.value?.close();
        }
    }, {
        immediate: true
    });
    // @ts-ignore
    const closeHandle = () => {
        // console.debug("关闭")
        emits("update:modelValue", false)
    }
    // 结束监听
    onUnmounted(() => unModalFlag())
</script>

<style scoped lang="scss">
.cancelClass ::v-deep .uv-modal__content{
  display: flex;
  flex-direction: column;
}
</style>